import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { gridRowDefaultProps } from './defaultProps';
import type { GridRowOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface GridRowProps extends GridRowOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

const GridRow: FC<GridRowProps> = (props) => {
  const { className, column, equal, color, textAlign, verticalAlign, only, children, forwardedRef, ...gridRowProps } =
    props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        color,
        numberToWord(column),
        { column, equal, width: equal },
        textAlign,
        { aligned: textAlign === 'justified' ? false : textAlign },
        verticalAlign,
        { aligned: verticalAlign },
        only,
        { only },
        'row',
        className,
      ),
      ...gridRowProps,
    },
    children,
  );
};

GridRow.displayName = 'GridColumn';
GridRow.defaultProps = gridRowDefaultProps;

export default GridRow;
